import { Button, Flex, Form, Input, Switch,TreeSelect,Radio } from 'antd'
import { useRef, useState } from 'react'
import type { RadioChangeEvent } from 'antd';
type MenuFormProps = {
  item: any
  onClose: () => void
}
const MenuForm: React.FC<MenuFormProps> = (props: any) => {
  console.log(props)
  const [form] = Form.useForm()
  const [value, setValue] = useState<string>();
  const [radioValue, setRadioValue] = useState(1);

  const onRadioChange = (e: RadioChangeEvent) => {
    console.log('radio checked', e.target.value)
    setValue(e.target.value)
  };

  const onChange = (newValue: string) => {
    setValue(newValue);
  };
  return (<>
    <Form form={form} labelAlign="right" labelCol={{ span: 6 }}>
      <Form.Item label="菜单名称" name="use" rules={[{ required: true, message: '请输入菜单名称' }]}>
        <Input placeholder="请输入菜单名称" maxLength={50} />
      </Form.Item>
      <Form.Item label="菜单类型" name="usetype" rules={[{ required: true }]}>
        <Radio.Group onChange={onRadioChange} value={radioValue}>
          <Radio value={1}>菜单</Radio>
          <Radio value={2}>按钮</Radio>
          <Radio value={3}>筛选</Radio>
        </Radio.Group>
      </Form.Item>
      <Form.Item label="上级菜单" name="up" rules={[{ required: true }]}>
        <TreeSelect
          value={value}
          treeData={treeData}
          placeholder="根菜单"
          allowClear
          treeDefaultExpandAll
          onChange={onChange}
        />
      </Form.Item>
      <Form.Item label="排序" name="sopt" rules={[{ required: true }]}>
        <Input type="number" placeholder="请输入菜单排序" maxLength={50} />
      </Form.Item>
      <Form.Item label="菜单图标" name="us2" rules={[{ required: true, message: '请选择菜单图标' }]}>
        <Input placeholder="请输入角色标识" />
      </Form.Item>
      <Form.Item label="菜单路由" name="us2" rules={[{ required: true, message: '请输入菜单路由' }]}>
        <Input placeholder="请输入菜单路由" />
      </Form.Item>
      <Form.Item label="权限标识" name="us3" rules={[{ required: true, message: '请输入权限标识' }]}>
        <Input placeholder="请输入权限标识" />
      </Form.Item>
      <Form.Item label="状态" name="us3" rules={[{ required: true }]}>
        <Switch defaultChecked/>
        <div style={{color: '#86909C', marginTop: 5}}>开启，此菜单可见状态</div>
      </Form.Item>
      <Form.Item>
        <Flex justify="center" align="center">
          <Button type="primary" htmlType="submit">提交</Button>
          <Button style={{ marginLeft: 10 }} onClick={props.onClose}>返回</Button>
        </Flex>
      </Form.Item>
    </Form>
  </>)
}

export default MenuForm